<template>
  <div>
    <el-dialog v-model="dialogFormVisible" :title="isTitle" width="1200px">
      <el-table :data="tableData1" style="width: 100%" v-if="buttonType == 1">
        <el-table-column prop="date" label="订单号" />
        <el-table-column prop="name" label="缴费单号" />
        <el-table-column prop="state" label="退款单号" />
        <el-table-column prop="city" label="微信结果" />
      </el-table>
      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" v-if="buttonType == 2">
        <el-tab-pane label="客诉" name="first">
          <div class="appealButton">
            <el-button type="primary" @click="addAppeal">添加客诉</el-button>
          </div>
          <div v-for="(item,index) in complaintsList" :key="index">
            <el-timeline style="max-width: 600px">
              <el-timeline-item :timestamp="item.time" placement="top">
                <el-card>
                  <p>客诉类型: {{item.type}}</p>
                  <p>客诉姓名: {{item.name}}</p>
                  <p>联系方式: {{item.mobile}}</p>
                  <p>客诉内容: {{item.content}}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
        <el-tab-pane label="备注" name="second">
          <div class="appealButton">
            <el-button type="primary" @click="addContent">添加备注</el-button>
          </div>
          <div v-for="(item,index) in remarksList">
            <el-timeline style="max-width: 600px">
              <el-timeline-item :timestamp="item.time" placement="top">
                <el-card>
                  <p>客诉类型: {{item.add}}</p>
                  <p>客诉姓名: {{item.department}}</p>
                  <p>联系方式: {{item.content}}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog v-model="innerVisible" width="500px" :title="activeName == 'first'?'添加客诉':'添加备注'" append-to-body
        style="max-height: 600px;">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
          class="demo-ruleForm" :size="formSize" status-icon v-if="activeName == 'first'">
          <el-form-item label="客诉类型:" prop="type">
            <el-input v-model="ruleForm.type" />
          </el-form-item>
          <el-form-item label="客诉姓名:" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="联系方式:" prop="mobile">
            <el-input v-model="ruleForm.mobile" />
          </el-form-item>
          <el-form-item label="客诉内容:" prop="content">
            <el-input v-model="ruleForm.content" />
          </el-form-item>
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click="onSubmit(1)">确认</el-button>
          </el-form-item>
        </el-form>
        <el-form ref="ruleFormRef2" style="max-width: 600px" :model="ruleForm2" :rules="rules2" label-width="auto"
          class="demo-ruleForm2" :size="formSize" status-icon v-else>
          <el-form-item label="添加人:" prop="add">
            <el-input v-model="ruleForm2.add" />
          </el-form-item>
          <el-form-item label="所在部门:" prop="department">
            <el-input v-model="ruleForm2.department" />
          </el-form-item>
          <el-form-item label="备注内容:" prop="content">
            <el-input v-model="ruleForm2.content" />
          </el-form-item>
          <el-form-item>
            <el-button>取消</el-button>
            <el-button type="primary" @click="onSubmit(2)">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <div v-if="buttonType == 3">
        <div class="rightbutton">
          <el-button type="primary">修改患者</el-button>
          <el-button type="primary">历史病例</el-button>
          <el-button type="danger">合并患者信息</el-button>
        </div>
        <!--   <div style="display: flex;flex-direction: row;">
          <div style="width: 40%;max-height: 600px;overflow-y: auto;">
            <div style="border-left: 4px solid #1890ff;padding-left: 6px;">患者基础信息</div>
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <div class="row">
                <el-form-item label="姓名:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="性别:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="年龄:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item label="身高:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="体重:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item label="联系方式:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item label="居住城市:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </div>
              <div style="border-left: 4px solid #1890ff;padding-left: 6px;">患者病情信息</div>
              <el-form-item label="病情描述:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="现病史:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="既往病史:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="过敏史:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="个人史:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="特殊时期:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="婚育史:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="家族史:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="检查资料:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="舌照面照:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <div style="border-left: 4px solid #1890ff;padding-left: 6px;">患者预约信息</div>
              <div class="row">
                <el-form-item label="预约科室:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="预约时间:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item label="就诊方式:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="问诊医生:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div style="width: 60%;max-height: 600px;overflow-y: auto;padding: 0 15px;">
            <div class="row">
              <el-form-item label="科室:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="就诊医生:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="病案号:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
            </div>
            <el-form-item label="患者:">
              <el-text>{{form.name}}</el-text>
            </el-form-item>
            <div class="row">
              <el-form-item label="身高(cm):">
                <el-input style="width:80px">{{form.name}}</el-input>
              </el-form-item>
              <el-form-item label="体重(kg):">
                <el-input style="width:80px">{{form.name}}</el-input>
              </el-form-item>
              <el-form-item label="详细地址:">
                <el-input style="width:80px">{{form.name}}</el-input>
              </el-form-item>
            </div>
            <el-form-item label="看诊次数:">
              <el-text>{{form.name}}</el-text>
            </el-form-item>
            <div class="row">
              <el-form-item label="本次挂号时间:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="本次预约看诊时间:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
              <el-form-item label="病历保存时间:">
                <el-text>{{form.name}}</el-text>
              </el-form-item>
            </div>
            <div class="row">
              <el-form-item label="就诊时间:">

              </el-form-item>
              <el-form-item label="患者病情:">

              </el-form-item>
            </div>
            <el-form-item label="患者主诉:">
              <el-input placeholder="请录入患者主诉"></el-input>
            </el-form-item>
            <el-form-item label="撰写主诉:">
              <el-input placeholder="请录入患者主诉"></el-input>
            </el-form-item>
            <el-form-item label="现病史:">
              <el-input type="textarea" placeholder="请录入患者主诉"></el-input>
            </el-form-item>

            <el-form-item label="既往病史:">

            </el-form-item>
            <el-form-item label="过敏史:">

            </el-form-item>
            <el-form-item label="个人史:">

            </el-form-item>
            <el-form-item label="特殊时期:">

            </el-form-item>
            <el-form-item label="婚育史:">

            </el-form-item>
            <el-form-item label="家族史:">

            </el-form-item>
            <el-form-item label="检查资料:">

            </el-form-item>
            <el-form-item label="舌照面照:">

            </el-form-item>
            <el-form-item label="辨病:">

            </el-form-item>
            <el-form-item label="辨证:">

            </el-form-item>
            <el-form-item label="处理意见:">

            </el-form-item>
          </div>
        </div> -->
        <div class="flex-container">
          <div class="left-panel">
            <div class="info-section">
              <div class="section-title">患者基础信息</div>
              <el-form :model="form" label-width="auto" style="max-width: 600px">
                <!-- 患者基础信息表单项 -->
                <div class="dialogForm">
                  <el-form-item label="姓名:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="性别:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="年龄:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="身高:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="体重:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                </div>
                <el-form-item label="联系方式:" class="row">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="居住城市:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>

              </el-form>
            </div>
            <div class="info-section">
              <div class="section-title">患者病情信息</div>
              <el-form :model="form" label-width="auto" style="max-width: 600px">
                <!-- 患者病情信息表单项 -->
                <el-form-item label="病情描述:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="现病史:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="既往病史:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="过敏史:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="个人史:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="特殊时期:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="婚育史:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="家族史:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="检查资料:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="舌照面照:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </el-form>
            </div>
            <div class="info-section">
              <div class="section-title">患者预约信息</div>
              <el-form :model="form" label-width="auto" style="max-width: 600px" class="dialogForm2" :inline="true">
                <!-- 患者预约信息表单项 -->
                <el-form-item label="预约科室:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="预约时间:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="就诊方式:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
                <el-form-item label="问诊医生:">
                  <el-text>{{form.name}}</el-text>
                </el-form-item>
              </el-form>
            </div>
            <div class="buttonBtn">
              <el-button type="primary">编辑</el-button>
            </div>
          </div>
          <div class="right-panel">
            <div class="info-section">
              <el-form :model="form" label-width="auto">
                <!-- 右侧表单项 -->
                <div class="dialogForm">
                  <el-form-item label="科室:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="就诊医生:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="病案号:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="患者:" class="row">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                </div>

                <div class="dialogForm">
                  <el-form-item label="身高(cm):">
                    <el-input style="width:80px">{{form.name}}</el-input>
                  </el-form-item>
                  <el-form-item label="体重(kg):">
                    <el-input style="width:80px">{{form.name}}</el-input>
                  </el-form-item>
                  <el-form-item label="详细地址:">
                    <el-input style="width:80px">{{form.name}}</el-input>
                  </el-form-item>
                  <el-form-item label="看诊次数:" class="row">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                </div>

                <div class="dialogForm">
                  <el-form-item label="本次挂号时间:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="本次预约看诊时间:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                  <el-form-item label="病历保存时间:">
                    <el-text>{{form.name}}</el-text>
                  </el-form-item>
                </div>

                <div class="dialogForm2">
                  <el-form-item label="就诊时间:">
                    1
                  </el-form-item>
                  <el-form-item label="患者病情:">
                    2
                  </el-form-item>
                </div>

                <el-form-item label="患者主诉:" class="row">
                  <el-input placeholder="请录入患者主诉"></el-input>
                </el-form-item>
                <el-form-item label="撰写主诉:" class="row">
                  <el-input placeholder="请录入患者主诉"></el-input>
                </el-form-item>
                <el-form-item label="现病史:" class="row">
                  <el-input type="textarea" placeholder="请录入患者主诉"></el-input>
                </el-form-item>

                <el-form-item label="既往病史:" class="row">

                </el-form-item>
                <el-form-item label="过敏史:" class="row">

                </el-form-item>
                <el-form-item label="个人史:" class="row">

                </el-form-item>
                <el-form-item label="特殊时期:" class="row">

                </el-form-item>
                <el-form-item label="婚育史:" class="row">

                </el-form-item>
                <el-form-item label="家族史:" class="row">

                </el-form-item>
                <el-form-item label="检查资料:" class="row">

                </el-form-item>
                <el-form-item label="舌照面照:" class="row">

                </el-form-item>
                <el-form-item label="辨病:" class="row">

                </el-form-item>
                <el-form-item label="辨证:" class="row">

                </el-form-item>
                <el-form-item label="处理意见:" class="row">

                </el-form-item>
              </el-form>
            </div>
            <div class="buttonBtn">
              <el-button >保存</el-button>
              <el-button type="primary">发送医生确认</el-button>
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div v-if="buttonType == 4" style="display: flex;flex-direction: row;">
        11
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ref,
    nextTick,
    onMounted,
    reactive
  } from 'vue'
  import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
  const dialogFormVisible = ref(false)
  const tableData1 = [{
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles'
  }]
  const isTitle = ref('')
  const buttonType = ref(null)
  const activeName = ref('first')
  const innerVisible = ref(false)
  const ruleForm = reactive({})
  const ruleForm2 = reactive({})
  const form = ref({})



  const rules = reactive({
    type: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
    name: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
    mobile: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
    content: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
  })

  const rules2 = reactive({
    add: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
    department: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
    content: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
    content: [{
      required: true,
      message: 'Please input Activity name',
      trigger: 'submit'
    }],
  })

  const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  const complaintsList = ref([])
  const remarksList = ref([])
  const buttonAll = (type) => {
    // refund退款
    // refundRecord退款记录
    // appeal客诉/备注
    // collection关联收款单
    // glRefund关联退款单
    // consultation问诊资料/病例
    // application申请退款
    // chat聊天记录
    // void作废
    // order订单派单记录
    if (type == 'refund') {
      ElMessageBox.confirm(
          '是否确认退款？',
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(() => {
          ElMessage({
            type: 'success',
            message: 'Delete completed',
          })
        })
        .catch(() => {
          // ElMessage({
          //   type: 'info',
          //   message: 'Delete canceled',
          // })
        })
    } else if (type == 'refundRecord') {
      buttonType.value = 1
      dialogFormVisible.value = true
      isTitle.value = "退款记录"
    } else if (type == 'appeal') {
      dialogFormVisible.value = true
      buttonType.value = 2
      isTitle.value = "客诉/备注"
    } else if (type == 'void') {
      ElMessageBox.confirm(
          '确定作废？',
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(() => {
          ElMessage({
            type: 'success',
            message: 'Delete completed',
          })
        })
        .catch(() => {
          // ElMessage({
          //   type: 'info',
          //   message: 'Delete canceled',
          // })
        })
    } else if (type == 'consultation') {
      dialogFormVisible.value = true
      buttonType.value = 3
      isTitle.value = "问诊资料/病历"
    } else if (type == 'chat') {
      dialogFormVisible.value = true
      buttonType.value = 4
      isTitle.value = "聊天记录"
    } else if (type == 'application') {
      //跳转页面申请退费
    } else if (type == 'collection') {
      //跳转页面
    } else if (type == 'glRefund') {
      //跳转页面
    } else if (type == 'order') {
      dialogFormVisible.value = true
      buttonType.value = 4
    }
  }

  //添加客诉
  const addAppeal = () => {
    innerVisible.value = true
  }
  const addContent = () => {
    innerVisible.value = true
  }
  const ruleFormRef = ref(null)
  const ruleFormRef2 = ref(null)
  const onSubmit = (type) => {
    console.log('submit!')
    console.log(ruleForm)
    if (type == 1) {
      complaintsList.value.push({
        ...ruleForm
      })
      innerVisible.value = false
      ruleFormRef.value.resetFields()
    } else {
      remarksList.value.push({
        ...ruleForm2
      })
      innerVisible.value = false
      ruleFormRef2.value.resetFields()
    }

    console.log('remarksList.value', remarksList.value)

  }
  defineExpose({
    buttonAll
  })
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    border-radius: 2px !important;
  }

  .marginB10 {
    margin-bottom: 10px;
  }

  .marginT10 {
    margin-top: 10px;
  }

  .marginL20 {
    margin-left: 20px;
  }

  .ps {
    display: flex;
    flex-direction: row;

    div {
      display: flex;
      margin-right: 10px;
      justify-content: space-between;

      .label {
        width: 100px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-select__wrapper {
    width: 100%;
  }

  .expressAll .header div {
    display: flex;
    flex-direction: row;
    width: 33.33%;

    span {
      width: 110px;
      margin-left: 10px;
      text-align: right;
    }
  }

  .row {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .row ::v-deep .el-form-item {
    width: 33.33%;
  }

  .appealButton {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .rightbutton {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  ::v-deep .el-form-item__label {
    color: #606266;
    font-weight: bold;
  }

  .flex-container {
    display: flex;
    flex-direction: row;
  }

  .dialogForm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

  }

  .dialogForm ::v-deep .el-form-item {
    width: 33.33% !important;
    margin-right: 0;
  }

  .dialogForm2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dialogForm2 ::v-deep .el-form-item {
    width: 50% !important;
    margin-right: 0;
  }

  .left-panel {
    width: 40%;
    max-height: 600px;
    overflow-y: auto;
    padding: 0 15px;
  }

  .right-panel {
    width: 60%;
    max-height: 600px;
    overflow-y: auto;
    padding: 0 15px;
  }

  .info-section {

    padding-left: 6px;
    margin-bottom: 20px;
  }

  .section-title {
    font-weight: bold;
    margin-bottom: 10px;
    border-left: 4px solid #1890ff;
    padding-left: 4px;
    height: 20px;
    line-height: 20px;
  }

  .row {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
  }
</style>